<template>
    <div id="read">
        <div>
            <el-card>
                <el-form ref="form" :model="form" label-width="80px" :inline="true" size="small">
                    <el-form-item>
                        <el-button type="primary" size="small" @click="addRecharge">添加分类</el-button>
                    </el-form-item>
                </el-form>
                <el-table
                        :data="tableData"
                        border
                        style="width: 100%">
                    <el-table-column
                            type="index"
                            label="序号"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            prop="title"
                            label="分类名称">
                    </el-table-column>
                    <el-table-column
                            width="150"
                            label="操作">
                        <template slot-scope="scope">
                            <el-button type="warning" plain size="small" @click="edit(scope.$index)">
                                修改
                            </el-button>
                            <el-button type="danger" plain size="small" @click="remove(scope.$index)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
            <!--            新增或编辑-->
            <el-dialog :title="fromTitle"
                       :width="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'90%':'50%'"
                       :visible.sync="visible">
                <el-form ref="form"
                         :label-width="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'100px':'150px'"
                         size="small">
                    <el-form-item label="分类名称"
                                  :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':'minWidth'">
                        <el-input v-model="form.title"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="dialogClose" size="small">取 消</el-button>
                <el-button type="primary" @click="dialogAffirm" size="small">确 定</el-button></span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        name: "read",
        data() {
            return {
                form: {
                    title: '',
                },
                tableData: [],
                visible: false,
                fromTitle: '',
                id: '',
                list: [],
                index: '',
                searchForm: {
                    status: ''
                }
            }
        },
        created() {
            this.getData()
        },
        methods: {
            getData() {
                this.$axios.post('admin/config/common_problem', {}).then((res) => {
                    let data = res.data;
                    if (!data[0].classArr) {
                        data[0].classArr = [];
                    }
                    this.list = data;
                    this.tableData = data[0].classArr;
                });
            },

            dialogClose() {
                this.visible = false
            },
            addRecharge() {
                this.form = {
                    title: '',
                };
                this.index = '';
                this.fromTitle = '新增';
                this.visible = true
            },
            edit(index) {
                this.fromTitle = '修改';
                this.index = index;
                this.form = this.tableData[index];
                this.visible = true;
            },
            dialogAffirm() {
                if (this.index === '') {
                    // 添加
                    this.list[0].classArr.push(this.form);
                    this.list.map((num) => {
                        num.classArr = this.list[0].classArr;
                    });
                    this.$axios.post('admin/config/common_problem_set', {config: this.list}).then((res) => {
                        this.$message.success('成功');
                        this.getData();
                        this.visible = false
                    });

                } else {
                    // 编辑
                    this.list[0].classArr[this.index] = this.form;
                    this.list.map((num) => {
                        num.classArr = this.list[0].classArr;
                    });
                    this.$axios.post('admin/config/common_problem_set', {config: this.list}).then((res) => {
                        this.$message.success('成功');
                        this.getData();
                        this.visible = false
                    });
                }
            },
            remove(index) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.list[0].classArr.splice(index, 1);
                    this.list.map((num) => {
                        num.classArr = this.list[0].classArr;
                    });
                    this.$axios.post("admin/config/common_problem_set", {config: this.list})
                        .then(res => {
                            this.$message.success('删除成功!');
                            this.getclassList()
                        })
                }).catch(() => {
                    this.$message.info('已取消删除');
                });
            }
        }
    }
</script>

<style scoped>

</style>